// 功能点：
// 轮播图



// 歌单推荐区域
const playlistSection = document.querySelector('.playlist-section');
// 三个小圆点
const points = document.querySelectorAll('.carousel-point');
// 轮播图（300%，轮播的是这个）
const carousel = document.querySelector('.carousel');
// 单页轮播图
const carouselArea = document.querySelector('.carousel-area');
// 单页轮播图宽度 1200
const carouselWidth = carouselArea.offsetWidth;
// 右按钮
const arrowRight = document.querySelector('.arrow-right-box');
// 左按钮
const arrowLeft = this.document.querySelector('.arrow-left-box');



// 右箭头计时器
let arrowTimer;



// 鼠标经过歌单推荐区域
playlistSection.addEventListener('mouseover', () => {
    clearTimeout(arrowTimer);
    arrowRight.style.display = 'block';
})



// 鼠标离开歌单推荐区域
playlistSection.addEventListener('mouseout', () => {
    arrowTimer = setTimeout(() => {
        arrowRight.style.display = 'none';
    }, 500);
})


let pointsLength = points.length;


// 给每个小圆点设置自定义index属性，值依次为0、1、2
for (var i = 0; i < pointsLength; i++) {
    points[i].setAttribute('data-index', i);
}



// 圆点点击事件
for (var i = 0; i < pointsLength; i++) {
    points[i].addEventListener('click', function () {

        // 排他思想（点击变色）
        for (var i = 0; i < pointsLength; i++) {
            points[i].className = 'carousel-point';
        }
        this.className = 'carousel-point current-point';

        // 轮播效果
        var indexValue = this.getAttribute('data-index');

        // 点击了某个小圆点后，需要把其索引号给num和count
        num = indexValue;
        count = indexValue;

        // 动画函数
        animate(carousel, -indexValue * carouselWidth);
    })
}



var num = 0;
var count = 0;
// 节流阀控制变量
// var flag = true;



// 右按钮点击事件
arrowRight.addEventListener('click', function () {

    if (num == pointsLength - 1) {
        carousel.style.left = 0;
        num = -1;
    }

    num++;

    // 动画函数
    animate(carousel, -num * carouselWidth);

    count++;

    if (count == pointsLength) {
        count = 0;
    }

    // 圆点样式变化
    pointChange();
});



// 左按钮点击事件
arrowLeft.addEventListener('click', function () {

    if (num == 0) {
        num = pointsLength;
        carousel.style.left = -num * carouselWidth + 'px';
    }

    num--;

    // 动画函数
    animate(carousel, -num * carouselWidth);

    count--;

    count = count < 0 ? (pointsLength - 1) : count;

    // 圆点样式变化
    pointChange();
})



// 圆点样式变化
function pointChange() {
    // 点击按钮，小圆点也会变化
    for (var i = 0; i < pointsLength; i++) {
        points[i].className = 'carousel-point';
    }
    points[count].className = 'carousel-point current-point';
}